<div class="l-title-group">
    <dl>
        <dt>Server Error</dt>
    </dl>
    <button class="far fa-window-close" (click)="onClose()"></button>
</div>
<div class="l-contents-group">
    <div class="l-contents">
        <div class="l-row">
            <div class="l-row-header">Message</div>
            <div class="l-row-content l-red">{{errorInfo.message}}</div>
        </div>
        <div class="l-row">
            <div class="l-row-header">URL</div>
            <div class="l-row-content l-red">{{errorInfo.data.requestInfo.url}}</div>
        </div>
        <div class="l-row" *ngIf="errorInfo.data.requestInfo.method">
            <div class="l-row-header">Method</div>
            <div class="l-row-content l-red">{{errorInfo.data.requestInfo.method}}</div>
        </div>
        <div class="l-row" *ngIf="errorInfo.data.requestInfo.headers">
            <div class="l-row-header">Header</div>
            <div class="l-row-content">
                <button class="l-toggle-btn fas fa-lg" [ngClass]="getState(showHeader)"
                        (click)="showHeader = !showHeader"></button>
                <div class="l-data-table" [hidden]="!showHeader">
                    <div *ngFor="let header of errorInfo.data.requestInfo.headers | keyvalue">
                        <div>{{header.key}}</div>
                        <div>{{header.value.join('')}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="l-row" *ngIf="errorInfo.data.requestInfo.parameters">
            <div class="l-row-header">Parameters</div>
            <div class="l-row-content">
                <button class="l-toggle-btn fas fa-lg" [ngClass]="getState(showParam)"
                        (click)="showParam = !showParam"></button>
                <div class="l-data-table" [hidden]="!showParam">
                    <div *ngFor="let param of errorInfo.data.requestInfo.parameters | keyvalue">
                        <div>{{param.key}}</div>
                        <div>{{param.value.join('')}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="l-row" *ngIf="errorInfo.trace">
            <div class="l-row-header">StackTrace</div>
            <div class="l-row-content">
                <button class="l-toggle-btn fas fa-lg" [ngClass]="getState(showStackTrace)"
                        (click)="showStackTrace = !showStackTrace"></button>
                <textarea disabled [hidden]="!showStackTrace">{{errorInfo.trace}}</textarea>
            </div>
        </div>

    </div>
</div>